<template>
  <div class="driver">
    <div class="form">
      <el-form ref="form" :model="form" :rules="rule" label-width="auto" inline="true" size="mini">
        <el-form-item prop="name" label="企业名称：">
          <el-input v-model="form.name" clearable placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="认证结果：">
          <el-select v-model="form.verified" clearable filterable>
            <el-option v-for="(val, key) in verifiedStatus" :label="val" :value="key" :key="key"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="mini" @click="refreshList">查 询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="top-type" ref="topType">
      <div class="btn-area" ref="btnArea" style="padding-left: 13px; margin-top: 10px">
        <el-row :gutter="24">
          <buttonName @clickEvent="clickEventDom"></buttonName>
        </el-row>
      </div>
      <div class="table" ref="inner">
        <el-table
          :data="tableData"
          border
          :height="maxHeight"
          :header-cell-style="{ textAlign: 'center' }"
          highlight-current-row
          @row-click="rowClick"
          @row-dblclick="dbrowClick"
        >
          <el-table-column label="序号" type="index" width="50"></el-table-column>
          <el-table-column align="left" prop="fltName" width="200" label="企业名称" show-overflow-tooltip sortable></el-table-column>
          <el-table-column align="left" label="认证结果" width="120" show-overflow-tooltip sortable>
            <template v-slot="scope"> {{ scope.row.fltCerequest === 'Y' ? '通过' : '不通过' }} </template>
          </el-table-column>
          <el-table-column align="left" prop="fltCreditcode" width="200" label="统一社会信用代码" show-overflow-tooltip sortable></el-table-column>
          <el-table-column align="left" prop="fltBank" width="200" label="银行名称" show-overflow-tooltip sortable></el-table-column>
          <el-table-column align="left" prop="fltAccount" width="200" label="银行帐号" show-overflow-tooltip sortable></el-table-column>
          <el-table-column align="left" prop="fltLegalname" width="200" label="法人姓名" show-overflow-tooltip sortable></el-table-column>
          <el-table-column align="left" prop="fltLegalcode" width="200" label="法人身份证" show-overflow-tooltip sortable></el-table-column>
          <el-table-column align="left" prop="fltLegalphone" width="200" label="法人手机号" show-overflow-tooltip sortable></el-table-column>
          <el-table-column align="left" prop="fltProxyname" width="200" label="代理人姓名" show-overflow-tooltip sortable></el-table-column>
          <el-table-column align="left" prop="fltProxycode" width="200" label="代理人身份证" show-overflow-tooltip sortable></el-table-column>
          <el-table-column align="left" prop="fltProxyphone" width="200" label="代理人手机号" show-overflow-tooltip sortable></el-table-column>
          <el-table-column align="left" prop="fltCreator" width="200" label="创建人" show-overflow-tooltip sortable></el-table-column>
          <el-table-column align="center" prop="fltCerequest" width="120" label="实名证书" show-overflow-tooltip sortable>
            <template slot-scope="scope">
              <el-checkbox :value="scope.row.fltCerequest === 'Y'" :disabled="true"></el-checkbox>
            </template>
          </el-table-column>
          <el-table-column align="left" prop="fltUrl" label="认证地址" show-overflow-tooltip sortable width="300">
            <template slot-scope="scope">
              <a :href="scope.row.fltUrl" target="_blank" style="text-decoration: none">{{ scope.row.fltUrl }}</a>
            </template>
          </el-table-column>
          <el-table-column prop="manage" label="操作" width="110">
            <template slot-scope="scope">
              <el-button size="mini" type="primary" @click="lookFile(scope.row)">认证结果</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="pages">
        <el-pagination
          ref="pagination"
          small
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="Pagination.currentPage"
          :page-sizes="Pagination.pageSizeList"
          :page-size="Pagination.pageSize"
          :layout="Pagination.layout"
          :total="Pagination.total"
        ></el-pagination>
      </div>
    </div>

    <el-dialog title="企业实名认证:" width="70%" :visible.sync="dialogFormVisible" :before-close="close" :close-on-click-modal="false">
      <el-form :model="registform" label-width="auto" :rules="regRules" ref="ruleForm">
        <div class="registbox">
          <div class="registname">基础信息</div>
          <el-row :gutter="24">
            <el-col :span="10">
              <el-form-item prop="fltName" label="企业名称：">
                <el-input v-model="registform.fltName" style="width: 100%" maxlength="32"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item prop="fltCreditcode" label="统一社会信用代码：">
                <el-input v-model="registform.fltCreditcode" style="width: 100%" clearable maxlength="32"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24">
            <el-col :span="8">
              <el-form-item prop="fltBank" label="银行名称：">
                <el-input v-model="registform.fltBank" style="width: 100%" clearable maxlength="32"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item prop="fltAccount" label="银行帐号：">
                <el-input v-model="registform.fltAccount" style="width: 100%" maxlength="32"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item prop="fltManager" label="企业管理申请人：">
                <el-radio-group v-model="registform.fltManager">
                  <el-radio :disabled="disabled" label="1">法人</el-radio>
                  <el-radio :disabled="disabled" label="2">代理人</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24">
            <el-col :span="8">
              <el-form-item prop="fltLegalname" label="法人姓名：">
                <el-input v-model="registform.fltLegalname" style="width: 100%" clearable maxlength="32"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item prop="fltLegalcode" label="法人证件号(身份证)：">
                <el-input v-model="registform.fltLegalcode" style="width: 100%" maxlength="32"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item prop="fltLegalphone" label="法人手机号：">
                <el-input v-model="registform.fltLegalphone" style="width: 100%" clearable maxlength="32"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24">
            <el-col :span="8">
              <el-form-item prop="fltProxyname" label="代理人姓名：">
                <el-input v-model="registform.fltProxyname" style="width: 100%" clearable maxlength="32"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item prop="fltProxycode" label="代理人身份证号码：">
                <el-input v-model="registform.fltProxycode" style="width: 100%" maxlength="32"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item prop="fltProxyphone" label="代理人手机号：">
                <el-input v-model="registform.fltProxyphone" style="width: 100%" clearable maxlength="32"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="close">取 消</el-button>
        <el-button type="primary" @click="registSave">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 附件上传 -->
    <el-dialog
      :title="uploadDialog.title"
      :visible.sync="uploadDialog.show"
      :close-on-click-modal="false"
      width="40%"
      style="padding: 0"
      @close="uploadDialogClose"
      v-el-drag-dialog
      v-dialogDrag
    >
      <div>
        <el-form ref="uploadFileFrom" :model="uploadFile" label-width="100px" :rules="uploadFileRules">
          <el-row>
            <el-col>
              <el-form-item label="文件名称：" prop="name">
                <el-input v-model="uploadFile.name" style="width: 80%" clearable maxlength="32"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col>
              <el-form-item label="文件：" prop="file">
                <el-upload
                  class="upload-demo"
                  accept=".pdf, .png, .img, .jpeg, .jpg"
                  drag
                  action
                  limit="1"
                  :on-remove="removeFile"
                  :file-list="uploadFile.fileList"
                  :on-change="addFile"
                  multiple
                  :show-file-list="false"
                  :auto-upload="false"
                  :on-exceed="fileUploadExceed"
                >
                  <i class="el-icon-upload"></i>
                  <div class="el-upload__text">
                    将文件拖到此处，或
                    <em>点击上传</em>
                  </div>
                  <div class="el-upload__tip" slot="tip">只能上传pdf/图片文件,最多不超过5MB</div>
                </el-upload>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" size="mini" plain @click="uploadDialog.show = false">关 闭</el-button>
        <el-button type="primary" size="mini" @click="doUploadFile">保存</el-button>
      </span>
    </el-dialog>

    <!-- 附件查看 -->
    <el-dialog
      :title="viewImageDialog.title"
      :visible.sync="viewImageDialog.show"
      :close-on-click-modal="false"
      width="40%"
      style="padding: 0"
      @close="viewImageDialogClose"
      v-el-drag-dialog
      v-dialogDrag
    >
      <div>
        <el-image :src="viewImageDialog.imgUrl"></el-image>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" size="mini" plain @click="viewImageDialog.show = false">关 闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import paginationMixin from '@/mixins/pagination'
import resizeMixin from '@/mixins/resize'
import isAuth from '@/mixins/buttonAuth'
import store from '@/store'
import buttonName from '@/components/buttonName/button-name.vue'
import { registFlt, findjfangType, findRglist, viewMessage, certificateRequest, upsealDocument, getFileList, beforeSign } from '@/request/api'
export default {
  mixins: [paginationMixin, resizeMixin, isAuth],
  data() {
    return {
      viewImageDialog: {
        show: false,
        title: '',
        imgUrl: '',
      },
      verifiedStatus: {
        Y: '通过',
        N: '不通过',
      },
      currentRole: localStorage.getItem('IS_SHOW1') || '',
      fileId: '',
      uploadFile: {
        name: '',
        fileList: [],
      },
      regRules: {
        fltProxyname: [{ required: true, message: '代理人姓名不能为空', trigger: 'change' }],
      },
      uploadFileRules: {
        name: [{ required: true, message: '文件名称不能为空', trigger: 'change' }],
      },
      uploadDialog: {
        title: '',
        show: false,
      },
      maxHeight: 200,
      currentData: {},
      form: {
        name: '',
        verified: '', // 实名认证
      },
      tableData: [],
      registform: {
        fltType: '',
        fltName: '',
        fltCreditcode: '',
        fltBank: '',
        fltAccount: '',
        fltManager: '2',
        fltLegalname: '',
        fltLegalcode: '',
        fltLegalphone: '',
        fltProxyname: '',
        fltProxycode: '',
        fltProxyphone: '',
      },
      dialogFormVisible: false,
      jftype: '',
    }
  },
  components: {
    buttonName,
  },
  created() {
    this.resize = () => {
      this.maxHeight = this.$refs['topType'].offsetHeight - 85
    }
  },
  mounted() {
    findjfangType({
      fltId: store.state.user.FLT_UUID_DX_H,
      dptId: store.state.user.DPTID_DX_H,
    }).then(res => {
      if (res.data != null) {
        this.jftype = res.data.type
      } else {
        this.jftype = 'PT'
      }
      this.refreshList()
    })
  },
  methods: {
    viewImageDialogClose() {
      this.viewImageDialog.imgUrl = ''
    },
    async viewImage() {
      if (Object.keys(this.currentData).length === 0) {
        this.$message({
          message: '至少选择一项',
          showClose: true,
          type: 'error',
        })
        return
      }
      const response = (
        await getFileList({
          pubId: this.currentData.uuid,
          module: 'QZ',
        })
      ).data
      if (!response || Object.keys(response).length === 0 || response.length === 0) {
        this.$message({
          message: '未找到印章',
          showClose: true,
          type: 'error',
        })
        return
      }
      this.viewImageDialog.imgUrl = process.env.NODE_ENV === 'production' ? '' : '/proxy' + response[0].aPath
      this.viewImageDialog.show = true
      this.viewImageDialog.title = '印章'
    },
    doUploadFile() {
      this.$refs.uploadFileFrom.validate(v => {
        if (v) {
          if (this.uploadFile.fileList.length == 0) {
            this.$message.error('请至少选择一个文件')
            return
          }
          try {
            let data = new FormData()
            data.append('file', this.uploadFile.fileList[0])
            data.append('type', 'seal')

            console.log(this.currentData.fltCustomerid)
            upsealDocument({
              customerId: this.currentData.fltCustomerid,
              id: this.currentData.uuid,
              file: data,
            }).then(res => {
              this.$message.success('上传成功')
              this.uploadDialog.show = false
            })
          } catch (error) {
            console.log(error)
          }
        }
      })
    },
    uploadDialogClose() {
      this.$refs.uploadFileFrom.resetFields()
      this.removeFile()
    },
    removeFile() {
      this.uploadFile.name = ''
      this.uploadFile.fileList = []
    },
    addFile(val) {
      this.uploadFile.fileList.push(val.raw)
      this.uploadFile.name = val.name
    },
    fileUploadExceed(val) {
      this.uploadFile.name = val[0].name
      this.uploadFile.fileList = val
    },
    //查看认证结果
    lookFile(val) {
      viewMessage({ transactionNo: val.fltTransactionno }).then(res => {
        console.log(res)
        if (res.data.code == 1) {
          let message = ''
          switch (res.data.data.company.status) {
            case '0':
              message = '未认证'
              break
            case '1':
              message = '管理员资料已提交'
              break
            case '2':
              message = '企业基本资料(没有申请 表)已提交'
              break
            case '3':
              message = '已提交待审核'
              break
            case '4':
              message = '审核通过'
              break
            case '5':
              message = '审核不通过'
              break
            case '6':
              message = '人工初审通过'
              break
          }
          this.$message.success(message)
        }
      })
    },
    //table表格数据
    getList(currentPage, pageSize, updateTotal) {
      findRglist({
        fltType: this.jftype,
        fltName: this.form.name,
        verified: this.form.verified,
        currentPage,
        pageSize,
      }).then(response => {
        this.tableData = response.data
        this.currentData = {}
        updateTotal(Number(response.total))
      })
    },
    registSave() {
      this.registform.fltType = this.jftype
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          registFlt(this.registform).then(res => {
            console.log(res)
            if (res.success == '1' && res.data.code == '1') {
              this.close()
              this.$message.success('注册成功，并在3秒后去认证页进行企业实名认证')
              setTimeout(() => {
                window.open(res.data.data.url, '_blank')
              }, 3000)
            } else {
              this.$message.error(res.data.msg)
              return
            }
          })
        }
      })
    },
    close() {
      this.registform = {
        fltType: '',
        fltName: '',
        fltCreditcode: '',
        fltBank: '',
        fltAccount: '',
        fltManager: '',
        fltLegalname: '',
        fltLegalcode: '',
        fltLegalphone: '',
        fltProxyname: '',
        fltProxycode: '',
        fltProxyphone: '',
      }
      this.dialogFormVisible = false

      this.refreshList()
    },
    //单击行
    rowClick(row) {
      this.currentData = Object.assign({}, row)
    },
    cerRequest() {
      if (Object.keys(this.currentData).length === 0) {
        this.$message.error('请选择一条数据')
        return
      }
      certificateRequest({ customerId: this.currentData.fltCustomerid, transactionNo: this.currentData.fltTransactionno, uuid: this.currentData.uuid }).then(
        res => {
          console.log(res)
          if (res.data.code == 1) {
            this.$message.success('申请成功')
          } else {
            this.$message.success('申请失败:' + res.data.msg)
          }
          this.refreshList()
        }
      )
    },
    regCompany() {
      let count = 0
      for (let index = 0; index < this.tableData.length; index++) {
        if (this.tableData[index].fltCerequest === 'Y') {
          count++
        }
      }
      if (count > 0) {
        this.$message.error('已有实名证书，请勿重复注册')
        return
      }
      this.dialogFormVisible = true
      this.registform.fltManager = '2'
      if (store.state.user.FLT_UUID_DX_H == '-1' && this.jftype == 'PT') {
        this.registform.fltName = '广西泛糖科技有限公司'
        this.registform.fltProxyname = '李翠芳'
        this.registform.fltProxyphone = '18260866919'
      }
    },
    openUploadDialog() {
      if (Object.keys(this.currentData).length === 0) {
        this.$message.error('请选择一条数据')
        return
      }
      if (this.currentData.fltCerequest !== 'Y') {
        this.$message.error('请选择已申请实名证书的信息')
        return
      }
      this.uploadDialog.title = '印章上传'
      this.uploadDialog.show = true
    },
    sign() {
      if (Object.keys(this.currentData).length === 0) {
        this.$message.error('请选择一条数据')
        return
      }
      if (this.currentData.fltCerequest !== 'Y') {
        this.$message.error('请选择已申请实名证书的信息')
        return
      }
      beforeSign(this.currentData).then(res => {
        if (res.success == '1') {
          this.$message.success('请在3秒后去授权页进行自动签署授权')
          setTimeout(() => {
            window.open(res.msg, '_blank')
          }, 3000)
        }
      })
    },
    clickEventDom(item) {
      const { mdlCode } = item
      if (item.mdlCode === 'register') {
        this.regCompany()
      } else if (item.mdlCode === 'request') {
        this.cerRequest()
      } else if (item.mdlCode === 'sealUpload') {
        this.openUploadDialog()
      } else if (item.mdlCode === 'beforeSign') {
        this.sign()
      }
      if (mdlCode === 'viewImage') {
        this.viewImage()
      }
    },
  },
}
</script>
<style lang="scss" scoped>
.registbox {
  padding: 12px 12px 1px 12px;
  position: relative;
  border: 1px solid rgb(29, 158, 233);
  border-radius: 5px;
  // height:300px;
  margin-bottom: 20px;
  .grid-content {
    height: 44px;
  }
  .registname {
    position: absolute;
    top: -20px;
    font-size: 16px;
    font-weight: 700;
    padding: 10px;
    line-height: 20px;
    background: #fff;
  }
}
.pic {
  height: 500px;
  overflow: auto;
  img {
    width: 100%;
  }
}
.driver {
  width: 100%;
  height: 100%;
  padding: 15px 15px 12px;
  display: flex;
  flex-direction: column;
  .form {
    height: 30px;
  }
  .btn {
    height: 50px;
    line-height: 50px;
  }
  .name {
    font-size: 16px;
    line-height: 20px;
    font-weight: 500;
  }
  .table {
    flex: 1;
  }
  .pages {
    height: 30px;
  }
  .top-type {
    width: 100%;
    height: 100%;
  }

  .box {
    //上传对话框
    overflow: hidden;
    height: 200px;
    .selectItem {
      // float:right;
      display: inline-block;
      width: 50%;
      height: 100%;
      box-sizing: border-box;
      padding: 20px;
    }
    .upload {
      // float:right;
      display: inline-block;
      width: 50%;
      height: 100%;
      box-sizing: border-box;
      padding: 20px;
    }
  }
}
</style>
